<template>
  <div>
    <div class="top">
      <span class="news"><van-icon name="chat-o" size="25px" /></span>
      <span class="set"><van-icon name="setting-o" size="25px" /></span>
    </div>
    <div class="information">
      <van-image
        round
        width="5rem"
        height="5rem"
        src="https://static.asus.com.cn/static/wap/newPages/images/avatar.png"
      />
      <span>登录  /</span> <span @click="fun1">注册 》</span>
    </div>
    <div class="box1">
      <div class="box2">华硕会员</div>
      <div class="box3">注册领888礼包及2000积分</div>
    </div>
    <van-nav-bar left-text="我的订单" right-text="全部订单 >" />
    <van-grid :column-num="5">
      <van-grid-item icon="balance-o" text="待付款" />
      <van-grid-item icon="send-gift-o" text="待发货" />
      <van-grid-item icon="logistics" text="已发货" />
      <van-grid-item icon="comment-o" text="待评价" />
      <van-grid-item icon="balance-list-o" text="退货/售后" />
    </van-grid>
    <el-carousel indicator-position="outside" height="150px">
      <el-carousel-item v-for="(v, index) in arr" :key="index">
        <img :src="v" class="img" />
      </el-carousel-item>
    </el-carousel>
    <van-nav-bar
      left-text="我的服务"
    />
      <van-grid :column-num="4">
      <van-grid-item icon="like-o" text="我的收藏" />
      <van-grid-item icon="todo-list-o" text="我的预约" />
      <van-grid-item icon="point-gift-o" text="我的活动" />
      <van-grid-item icon="fire-o" text="网点查询" />
      <van-grid-item icon="points" text="A码兑换" />
    </van-grid>
    <van-tabbar v-model="active">
      <van-tabbar-item @click="fun" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" @click="fun2">分类</van-tabbar-item>
      <van-tabbar-item icon="browsing-history-o" @click="fun3">发现</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";
Vue.use(Icon);

import { NavBar } from "vant";
Vue.use(NavBar);

import { Tabbar, TabbarItem } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);

import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  data() {
    return {
      arr: [
        " https://static.asus.com.cn/store/20230201/15391955524952.jpg",
        "https://static.asus.com.cn/store/20230202/11222549101515.jpg",
      ],
      active:4
    };
  },
  methods:{
    fun(){
      this.$router.push({path:'/total'}).catch(err=>{})
    },
    fun1(){
      this.$router.push({path:'/register'}).catch(err=>{})
    },
    fun2(){
      this.$router.push({path:'/classification'}).catch(err=>{})
    },
    fun3(){
      this.$router.push({path:'/action'}).catch(err=>{})
    },
  }
};
</script>

<style scoped>
.top {
  display: flex;
}
.news {
  display: block;
  margin-top: 10px;
  margin-left: 280px;
}
.set {
  display: block;
  margin-top: 10px;
  margin-left: 30px;
}
.information {
  height: 100px;
  line-height: 50px;
}
.box1 {
  width: 340px;
  height: 80px;
  background-color: blueviolet;
  margin-left: 15px;
  border-radius: 10px 10px 0 0;
}
.box2 {
  width: 100px;
  height: 30px;
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  line-height: 30px;
  border-top: 1px solid transparent;
  font-weight: 600;
  color: blanchedalmond;
}
.box3 {
  width: 300px;
  height: 30px;
  color: white;
  margin-left: 25px;
  margin-top: 15px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img {
  height: 100%;
  width: 100%;
}
</style>